import type { Comment as CommentType } from '@/apis/methods/comment.api'

/**
 * 评论组件布局类型
 */
export type CommentLayout = 'default' | 'compact' | 'minimal' | 'card' | 'timeline'

/**
 * 头像尺寸类型
 */
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

/**
 * 卡片样式类型
 */
export type CardStyle = 'default' | 'minimal' | 'elevated' | 'outlined' | 'flat' | 'glass' | 'neon'

/**
 * 间距类型
 */
export type Spacing = 'tight' | 'normal' | 'loose' | 'xl'

/**
 * 主题类型
 */
export type Theme = 'light' | 'dark' | 'auto' | 'custom'

/**
 * 动画类型
 */
export type AnimationType = 'fade' | 'slide' | 'scale' | 'bounce' | 'none'

/**
 * 响应式断点类型
 */
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

/**
 * 样式配置接口
 */
export interface StyleConfig {
  /** 自定义CSS类名 */
  customClass?: string
  /** 自定义CSS变量 */
  customVars?: Record<string, string>
  /** 是否使用默认样式 */
  useDefaultStyles?: boolean
  /** 样式预设 */
  preset?: 'modern' | 'classic' | 'minimal' | 'colorful'
}

/**
 * 主题配置接口
 */
export interface ThemeConfig {
  /** 主题类型 */
  type: Theme
  /** 自定义主题变量 */
  variables?: Record<string, string>
  /** 是否跟随系统主题 */
  followSystem?: boolean
}

/**
 * 响应式配置接口
 */
export interface ResponsiveConfig {
  /** 移动端配置 */
  mobile?: Partial<CommentItemProps>
  /** 平板端配置 */
  tablet?: Partial<CommentItemProps>
  /** 桌面端配置 */
  desktop?: Partial<CommentItemProps>
  /** 自定义断点配置 */
  custom?: Record<Breakpoint, Partial<CommentItemProps>>
}

/**
 * 动画配置接口
 */
export interface AnimationConfig {
  /** 动画类型 */
  type: AnimationType
  /** 动画持续时间 */
  duration?: number
  /** 动画延迟 */
  delay?: number
  /** 缓动函数 */
  easing?: string
  /** 是否启用悬停动画 */
  hover?: boolean
}

/**
 * 插槽参数接口
 */
export interface SlotProps {
  /** 评论数据 */
  comment: CommentType
  /** 回复列表 */
  replies?: CommentType[]
  /** 是否显示回复 */
  showReplies?: boolean
  /** 是否有更多回复 */
  hasMoreReplies?: boolean
  /** 是否正在提交 */
  submitting?: boolean
  /** 布局类型 */
  layout?: CommentLayout
  /** 头像尺寸 */
  avatarSize?: AvatarSize
  /** 卡片样式 */
  cardStyle?: CardStyle
  /** 间距类型 */
  spacing?: Spacing
  /** 格式化时间函数 */
  formatTime?: (dateString: string) => string
  /** 样式类名 */
  classes?: {
    avatar?: string
    author?: string
    content?: string
    actions?: string
    replies?: string
    card?: string
  }
}

/**
 * 事件处理器接口
 */
export interface EventHandlers {
  /** 切换回复显示 */
  toggleReplies: (commentId: string) => void
  /** 加载更多回复 */
  loadMoreReplies: (parentId: string) => void
  /** 切换点赞状态 */
  toggleLike: (commentId: string) => void
  /** 创建回复 */
  createReply: (parentId: string, content: string, mentionedUsers: string[]) => void
  /** 举报评论 */
  reportComment: (commentId: string) => void
  /** 删除评论 */
  deleteComment: (commentId: string) => void
  /** 回复点击 */
  replyClick: (reply: CommentType) => void
  /** 开始回复 */
  startReply: () => void
  /** 取消回复 */
  cancelReply: () => void
}

/**
 * 评论组件Props接口
 */
export interface CommentItemProps {
  /** 评论数据 */
  comment: CommentType
  /** 回复列表 */
  replies?: CommentType[]
  /** 是否显示回复 */
  showReplies?: boolean
  /** 是否有更多回复 */
  hasMoreReplies?: boolean
  /** 是否正在提交 */
  submitting?: boolean

  // 布局控制
  /** 布局类型 */
  layout?: CommentLayout
  /** 是否启用响应式布局 */
  responsive?: boolean

  // 组件显示控制
  /** 是否显示头像 */
  showAvatar?: boolean
  /** 是否显示操作按钮 */
  showActions?: boolean
  /** 是否显示回复按钮 */
  showReplyButton?: boolean
  /** 是否显示点赞按钮 */
  showLikeButton?: boolean
  /** 是否显示更多按钮 */
  showMoreButton?: boolean
  /** 是否显示时间戳 */
  showTimestamp?: boolean
  /** 是否显示回复数量 */
  showReplyCount?: boolean
  /** 是否显示回复区域 */
  showRepliesSection?: boolean

  // 样式配置
  /** 头像尺寸 */
  avatarSize?: AvatarSize
  /** 卡片样式 */
  cardStyle?: CardStyle
  /** 间距类型 */
  spacing?: Spacing
  /** 样式配置 */
  styleConfig?: StyleConfig
  /** 主题配置 */
  themeConfig?: ThemeConfig
  /** 响应式配置 */
  responsiveConfig?: ResponsiveConfig
  /** 动画配置 */
  animationConfig?: AnimationConfig

  // 交互配置
  /** 是否启用悬停效果 */
  enableHover?: boolean
  /** 是否启用动画 */
  enableAnimations?: boolean
  /** 是否启用点击外部关闭 */
  enableClickOutside?: boolean
  /** 是否启用键盘导航 */
  enableKeyboard?: boolean

  // 自定义配置
  /** 自定义类名 */
  customClass?: string
  /** 自定义样式 */
  customStyle?: Record<string, string>
  /** 自定义CSS变量 */
  customVars?: Record<string, string>
  /** 自定义时间格式化函数 */
  customFormatTime?: (dateString: string) => string
}

/**
 * 评论组件事件接口
 */
export interface CommentItemEvents {
  /** 切换回复显示 */
  toggleReplies: [commentId: string]
  /** 加载更多回复 */
  loadMoreReplies: [parentId: string]
  /** 切换点赞状态 */
  toggleLike: [commentId: string]
  /** 创建回复 */
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
  /** 举报评论 */
  reportComment: [commentId: string]
  /** 删除评论 */
  deleteComment: [commentId: string]
  /** 回复点击 */
  replyClick: [reply: CommentType]
  /** 头像点击 */
  avatarClick: [author: CommentType['author']]
  /** 作者点击 */
  authorClick: [author: CommentType['author']]
  /** 内容点击 */
  contentClick: [comment: CommentType]
}

/**
 * 样式预设配置
 */
export const STYLE_PRESETS = {
  modern: {
    cardStyle: 'elevated' as CardStyle,
    spacing: 'normal' as Spacing,
    enableAnimations: true,
    enableHover: true,
  },
  classic: {
    cardStyle: 'outlined' as CardStyle,
    spacing: 'normal' as Spacing,
    enableAnimations: false,
    enableHover: true,
  },
  minimal: {
    cardStyle: 'minimal' as CardStyle,
    spacing: 'tight' as Spacing,
    enableAnimations: false,
    enableHover: false,
  },
  colorful: {
    cardStyle: 'neon' as CardStyle,
    spacing: 'loose' as Spacing,
    enableAnimations: true,
    enableHover: true,
  },
} as const

/**
 * 时间格式化预设函数
 */
export const TIME_FORMATTERS = {
  /** 中文相对时间 */
  chinese: (dateString: string): string => {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now.getTime() - date.getTime()

    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(diff / 3600000)
    const days = Math.floor(diff / 86400000)

    if (minutes < 1) return '刚刚'
    if (minutes < 60) return `${minutes}分钟前`
    if (hours < 24) return `${hours}小时前`
    if (days < 7) return `${days}天前`

    return date.toLocaleDateString('zh-CN')
  },

  /** 英文相对时间 */
  english: (dateString: string): string => {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now.getTime() - date.getTime()

    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(diff / 3600000)
    const days = Math.floor(diff / 86400000)

    if (minutes < 1) return 'just now'
    if (minutes < 60) return `${minutes}m ago`
    if (hours < 24) return `${hours}h ago`
    if (days < 7) return `${days}d ago`

    return date.toLocaleDateString('en-US')
  },

  /** 完整日期时间 */
  full: (dateString: string): string => {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN')
  },

  /** 仅日期 */
  dateOnly: (dateString: string): string => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN')
  },

  /** ISO格式 */
  iso: (dateString: string): string => {
    return new Date(dateString).toISOString()
  },

  /** 自定义格式 */
  custom:
    (format: string) =>
    (dateString: string): string => {
      const date = new Date(dateString)
      // 简单的格式化实现，可以根据需要扩展
      return format
        .replace('YYYY', date.getFullYear().toString())
        .replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'))
        .replace('DD', date.getDate().toString().padStart(2, '0'))
        .replace('HH', date.getHours().toString().padStart(2, '0'))
        .replace('mm', date.getMinutes().toString().padStart(2, '0'))
        .replace('ss', date.getSeconds().toString().padStart(2, '0'))
    },
} as const

/**
 * 默认配置
 */
export const DEFAULT_CONFIG: Partial<CommentItemProps> = {
  replies: [],
  showReplies: false,
  hasMoreReplies: false,
  submitting: false,
  layout: 'default',
  responsive: true,
  showAvatar: true,
  showActions: true,
  showReplyButton: true,
  showLikeButton: true,
  showMoreButton: true,
  showTimestamp: true,
  showReplyCount: true,
  showRepliesSection: true,
  avatarSize: 'md',
  cardStyle: 'default',
  spacing: 'normal',
  enableHover: true,
  enableAnimations: true,
  enableClickOutside: true,
  enableKeyboard: true,
  customFormatTime: TIME_FORMATTERS.chinese,
  styleConfig: {
    useDefaultStyles: true,
    preset: 'modern',
  },
  themeConfig: {
    type: 'auto',
    followSystem: true,
  },
  animationConfig: {
    type: 'fade',
    duration: 300,
    easing: 'ease-out',
    hover: true,
  },
}
